<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 提现列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 筛选功能 等待添加 -->
            <div class="table-extra">
                <el-input
                    placeholder="输入昵称搜索用户"
                    class="user-nickname-search-box"
                    v-model="nicknameSearchQuery"
                    :clearable="true"
                    @clear="handleClearNicknameQuery"
                >
                    <el-button slot="append" @click="handleSearchByNickname">搜索</el-button>
                </el-input>
                <el-select v-model="userType">
                    <el-option
                        v-for="item in userTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <el-table v-loading="loading" :data="tableData" size='small' :default-sort="{prop: 'regTime', order: 'descending'}">
                <el-table-column type="index" :index="indexMethod">
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" />
                <el-table-column prop="openid" label="UID" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="100">
                </el-table-column>
                <el-table-column prop="lastLoginTime" label="最后登录时间" width="180">
                    <template slot-scope="scopeData">
                        <div>{{scopeData.row.lastLoginTime | fomatTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="userStatus" label="状态" width="80">
                    <template slot-scope="scopeData">
                        {{scopeData.row.userStatus | userStateSwitchFliter}}
                    </template>
                </el-table-column>
                <el-table-column prop="userStatus" label="白名单状态" width="80">
                    <template slot-scope="scopeData">
                        {{scopeData.row.isWhite | userIsWhiteFliter}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-if='scope.row.userStatus !==1'>
                            编辑用户状态</el-button>
                    </template>
                </el-table-column>
                <!-- 白名单 -->
                <el-table-column label="白名单" width="180">
                    <template slot-scope="scope">
                        <el-button size="small" @click="handleEditWhiteUser(scope.$index, scope.row)">编辑白名单</el-button>
                        <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
                <el-table-column prop="regTime" label="注册时间" width="160" sortable>
                    <template slot-scope="scopeData">
                        <div>
                            {{scopeData.row.regTime | fomatTime}}</div>
                    </template>
                </el-table-column>

                <el-table-column prop="myOrderNumber" label="买家订单数量（所有状态）" width="80">
                </el-table-column>
                <el-table-column prop="myUserOrderNumber" label="商家订单数量" width="80">
                </el-table-column>
                <el-table-column prop="money" label="余额（元）" width="80">
                    <template slot-scope="scopeData">
                        {{scopeData.row.money | getPrice}}
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10"
                    layout="total, prev, pager, next" :total="totalNum" class="pagination-order">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑封禁用户状态弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <Dialog :edit-data="rowList" @upData="updata" @change="changeStatus">
            </Dialog>
        </el-dialog>

        <!-- 编辑白名单弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="50px">
                <!-- <el-form-item label="日期">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item> -->

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="form.isWhite" placeholder="请选择该用户的白名单状态">
                        <el-option label="加入白名单" :value="1"></el-option>
                        <el-option label="移出白名单" :value="0"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>


</template>




<script>
import { api } from "@/api/api.js";
import Dialog from "@/components/page/userList/dialog.vue";
import methods from "@/util/methods";
export default {
  data() {
    return {
      userTypeOptions: [
        {
          label: "全部",
          value: 0
        },
        {
          label: "游客",
          value: 1
        },
        {
          label: "注册用户",
          value: 2
        },
        {
          label: "卖家",
          value: 3
        }
      ],
      tableData: [],
      totalNum: 0,
      currentPage: 1,
      menuRouter: true,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      currIndex: null,
      title: "编辑",
      rowList: {},
      editVisible: false,
      userType: 0,
      form: {
        name: "",
        date: "",
        address: ""
      },
      nicknameSearchQuery: "",
      idx: -1,
      loading: false
    };
  },
  watch: {
    userType() {
      this.currentPage = 1;
      this.getAdminUserList();
    }
  },
  methods: {
    indexMethod(index) {
      let i = (this.currentPage - 1) * 10 + index + 1;
      return i;
    },
    getAdminUserList() {
      this.loading = true;
      const {
        currentPage: page,
        userType,
        nicknameSearchQuery: nickName
      } = this;
      this.http
        .post(api.adminUserList, { page, state: userType, size: 10, nickName })
        .then(({ data }) => {
          const { data: tableData } = data;
          this.tableData = tableData;
          this.totalNum = data.total;
        })
        .finally(() => (this.loading = false));
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAdminUserList();
      console.log(`当前页: ${val}`);
    },
    open(row) {
      let index = this.tableData.indexOf(row);
      let openid = row.openid;
      console.log(row, index, openid);
      this.$confirm("此操作将修改用户状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.http
            .post(api.chageStatus, {
              openid
            })
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              } else {
                this.$message({
                  type: "fail",
                  message: res.data.msg
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
            center: true
          });
        });
    },
    updata(msg) {
      let userStatus = Number(msg.userStatus);
      if (userStatus == 1) {
        let openid = msg.openid;
        this.http
          .post(api.chageStatus, {
            openid
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "修改成功!",
                center: true
              });
              this.tableData[this.currIndex].userStatus = userStatus;
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                center: true
              });
            }
          });
      }
      this.dialogFormVisible = false;
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      // row.userStatus = methods.userStateSwitchFliter(row.userStatus)
      this.rowList = {
        ...row
      };
      this.currIndex = this.tableData.indexOf(row);
      this.title = "编辑用户状态";
    },
    changeStatus(data) {
      this.dialogFormVisible = data;
    },
    handleEditWhiteUser(index, row) {
      this.idx = index;
      const item = this.tableData[index];
      this.form = item;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      // this.$set(this.tableData, this.idx, this.form);
      this.modifyIsWhite(this.form.isWhite);
    },
    modifyIsWhite(isWhite) {
      let self = this;
      // let tableDataIndex =(this.currentPage - 1) * 10 + this.idx
      this.http
        .post(api.modifyWhiteUser, {
          isWhite,
          openid: this.form.openid
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$set(this.tableData, this.idx, this.form);
            // debugger
            // this.$set(this.tableData, tableDataIndex, this.form);
            // debugger
            this.$message.success(`修改用户白名单状态成功`);
          }
          this.editVisible = false;
        })
        .catch(e => {
          this.editVisible = false;
        });
    },
    handleSearchByNickname() {
      this.userType = 0;
      this.getAdminUserList();
    },
    handleClearNicknameQuery() {
      this.currentPage = 1;
      this.userType = 0;
      this.getAdminUserList();
    }
  },
  mounted() {
    this.getAdminUserList();
  },
  components: {
    Dialog
  }
};
</script>

<style lang="scss" scoped>
.is-active {
  color: #303133;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 200px;
}

.goods-wrapper {
  border: 1px solid black;
  vertical-align: middle;
  padding-left: 6px;
}

.box-1 {
  display: flex;
  justify-content: space-between;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.pagination-order {
  margin: auto;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table-extra {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .user-nickname-search-box {
    width: 250px;
    margin-right: 5px;
  }
}
</style>
